<template>
	<view class="">
		<view style="position: fixed;top: 0;left: 0;width: 100%;">
			<view style="background-color: #3277fc;position:relative;height: 300rpx;">
				<navbar title="提报列表" :back="true" color="#fff" bgColor="#3277fc" leftIconColor="#fff"></navbar>
				<view style="position:absolute;z-index: 20000;left: 0;width: 95%;background-color: #fff;border-radius: 40rpx 40rpx 0 0;bottom: -104rpx;padding: 40rpx 20rpx 0 20rpx;">
					<u-search placeholder="输入会议关键词"  :showAction='false' v-model='page.keyword' borderColor='#3277fc' height='60' bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'
						@search="search()">
					</u-search>
					<view style="margin-top: 20rpx;">
						<u-tabs :list="nav" @click="changTab" :current="current" lineColor="#3277fc" :inactiveStyle="{color:'#999999'}" :activeStyle="{color:'#000',fontWeight:'650'}"></u-tabs>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 410rpx;"></view>
	    <view style="padding:20rpx;" v-if="list.length!=0">
			<view v-for="(item,index) in list" :key="index" style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;border-bottom: 2rpx solid rgba(112, 112, 112,.15);">
					<view style="font-size: 30rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;width: 520rpx;font-weight: 650;">{{item.name}}</view>
					<view style="font-size: 30rpx;color: red;font-weight: 650;" v-if="!item.statue">待提交</view>
					<view style="font-size: 30rpx;color:rgba(167, 165, 165,.8);font-weight: 650;" v-else>已提交</view>
				</view>
				
				<view style="display: flex;align-items: center;margin: 20rpx 0;color: #6d6d6d;">
					<view style="font-size: 26rpx;">提报人员:</view>
					<view style="font-size: 26rpx;margin-left: 20rpx;">{{item.officialName}}</view>
				</view>
				<view style="display: flex;align-items: center;margin: 20rpx 0;color: #6d6d6d;">
					<view style="font-size: 26rpx;">添加时间:</view>
					<view style="font-size: 26rpx;margin-left: 20rpx;">{{item.addTime}}</view>
				</view>
			    <view style="display: flex;align-items: center;color: #6d6d6d;padding-bottom: 20rpx;border-bottom: 2rpx solid rgba(112, 112, 112,.15);">
					<view style="font-size: 26rpx;">参会人员:</view>
					<view style="display: flex;align-items: center;">
						<view v-for="(e,index) in item.type" :key="index" style="font-size: 26rpx;margin-left: 20rpx;">
							<view class="">{{e==0?'达人':e==1?'商家':e==2?'团长':e==3?'机构':''}}</view>
						</view>
					</view>
				</view>
				<u-modal :show="show" title="失败原因" :content='item.failMsg'></u-modal>
				<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
					<view style="font-size: 26rpx;color: #b1b1b1;">其他操作</view>
					<view style="display: flex;align-items: center;">
						<view style="border: 2rpx solid #4282fc;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;width: 90rpx;text-align: center;color: #4282fc;" @click="up(item.id)">编辑</view>
						<view style="border: 2rpx solid #b1b1b1;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;width: 90rpx;text-align: center;color: #b1b1b1;margin:0 20rpx;" @click="det(item.id)">删除</view>
						<view style="border: 2rpx solid red;padding: 10rpx 20rpx;border-radius: 20rpx;font-size: 24rpx;width: 90rpx;text-align: center;color: red;" v-if="item.statue==4&&item.failMsg!=''" @click="show=true">失败原因</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<u-empty
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
					text='暂无提报信息'
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/baseNavbar.vue"
	import {
		getoffList,
		getinfodel
	} from "@/api/make.js"
	export default{
		components:{
			navbar
		},
		data(){
			return{
				current:0,
				show:false,
				nav:[{
						name:'全部',
						statue:''
					},{
						name:'草稿箱',
						statue:0
					},{
						name:'已提交',
						statue:1,
					}
					// },{
					// 	name:'待审核',
					// 	statue:2
					// },{
					// 	name:'审核成功',
					// 	statue:3
					// },{
					// 	name:'审核失败',
					// 	statue:4
					// }
				],
				proList:[
					{
						text:'达人',
						id:0,
					},
					{
						text:'团长',
						id:2,
					},
					{
						text:'商家',
						id:1,
					},
					{
						text:'机构',
						id:1,
					}
				],
				loadend: false,
				loading: false,
				page: {
					page: 1,
					limit: 10,
					statue: '',
					keyword:''
				},
				list:[],
				topheight:''
			}
		},
		onLoad(){
			this.topheight = uni.getMenuButtonBoundingClientRect().bottom+4
			console.log('11',this.topheight);
		},
		onShow(){
			this.resetList()
		},
		onReady() {
			
		},
		methods:{
			search(e){
				this.page.keyword = e
				this.resetList()
			},
			up(id){
				uni.navigateTo({
					url:'/pages/sub/store/forward?id='+id
				})
			},
			changTab(e){
				console.log('1',e);
				this.page.statue = e.statue
				this.resetList()
			},
			resetList(callback) {
				this.page.page = 1;
				this.loading = false
				this.loadend = false
				this.list = []
				this.getList(callback)
			},
			getList(callback) {
				if (this.loadend || this.loading)
					return
				this.loading = true
				let tlist =[]
				getoffList(this.page).then(res => {
					this.page.page++
					this.$set(this, 'list', this.list.concat(res.data.list));
					this.page.keyword =''
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
					if (callback != undefined) {
						callback()
					}
				}).catch(err => {
					this.loading = false
					this.loadend = true
					if (callback != undefined) {
						callback()
					}
				})
			},
			det(id){
				getinfodel({id,}).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'删除成功'
						})
						this.resetList()
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f3f5;
		height: 100%;
	}
</style>